Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 427 | Author: cody 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Navbar On Click Sliding Animation</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

<body>

    <nav class="nav">
        <a href="#" class="nav-item is-active" active-color="#f87917">Home</a>
        <a href="#" class="nav-item" active-color="#019901">About</a>
        <a href="#" class="nav-item" active-color="#0f2abe">Testimonials</a>
        <a href="#" class="nav-item" active-color="#db0000">Blog</a>
        <a href="#" class="nav-item" active-color="#663399">Contact</a>
        <span class="nav-indicator"></span>
    </nav>

    <script>
        const indicator = document.querySelector(".nav-indicator");
        const items = document.querySelectorAll(".nav-item");

        function handleIndicator(el) {
            items.forEach((item) => {
                item.classList.remove("is-active");
                item.removeAttribute("style");
            });

            indicator.style.width = `${el.offsetWidth}px`;
            indicator.style.left = `${el.offsetLeft}px`;
            indicator.style.backgroundColor = el.getAttribute("active-color");

            el.classList.add("is-active");
            el.style.color = el.getAttribute("active-color");
        }

        items.forEach((item, index) => {
            item.addEventListener("click", (e) => {
                handleIndicator(e.target);
            });
            item.classList.contains("is-active") && handleIndicator(item);
        });
    </script>

</body>

</html>

Share this file: